<template>
	<div class="wrapper">
		<div class="content" :style="{ transform: 'rotateY(' + r + 'deg)' }">
			<Login class="login" v-model:r="r" />
			<FindPwd class="findpwd" v-model:r="r" />
		</div>
	</div>
</template>

<script setup>
import Login from '@@/login'
import FindPwd from '@@/login/findpwd'
import { ref } from 'vue'
const r = ref(0)
</script>

<style scoped lang="scss">
.wrapper {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 1000px;
}
.content {
	height: 360px;
	width: 400px;
	box-sizing: border-box;
	box-shadow: 2px 2px 10px #7d7373;
	transform-style: preserve-3d;
	transition: 1s;
	background-color: #ffffff;
	position: relative;
	.findpwd {
		transform: rotateY(180deg) translateZ(1px);
	} 
	.login {
		transform: translateZ(1px);
	}
	.login, .findpwd {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 40px;
	}
}
</style>